<template>
    <div class="table-container">
    <h4 class="text-center">出版展示</h4>
    <table class="custom-table" style="width: 100%">
        <thead>
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>价格</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item) in userlist" :key="item.id">
                <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.price }}</td>
                <td>
                  <router-link :to="{
                    name: 'details',
                    params: { id: item.id },
                    query: { description: item.description }
                  }"
                  class="link-details"
                  >详情</router-link>
                  <button @click="deleteItem(item.id)" class="btn-delete">删除</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>
</template>
<script setup>
import { useRoute } from 'vue-router'
import { ref, onBeforeMount, onActivated } from 'vue'

const route = useRoute()
const userlist = ref([])

// 从 localStorage 初始化数据
onBeforeMount(() => {
  const savedList = localStorage.getItem('userlist')
    userlist.value = JSON.parse(savedList)
  addUserFromQuery()
  saveToLocalStorage()
})

onActivated(() => {
  addUserFromQuery()
  saveToLocalStorage()
})

// 添加新书籍方法
const addUserFromQuery = () => {
  const { name, price, description } = route.query
  if (name && price) {
    // 检查是否已经添加过该书籍（根据名称和价格判断）
    const exists = userlist.value.some(
      item => item.name === name && item.price === price
    )
    if (!exists) {
      const id = String(userlist.value.length + 1)
      userlist.value.push({ id, name, price, description })
    }
  }
}

// 保存到 localStorage
const saveToLocalStorage = () => {
  localStorage.setItem('userlist', JSON.stringify(userlist.value))
}
const deleteItem = (index) => {
  userlist.value=userlist.value.filter(item => item.id !== index)
  saveToLocalStorage()
}
</script>





<style scoped>
.table-container {
  max-width: 960px;
  margin: 30px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.text-center {
  text-align: center;
  font-size: 24px;
  color: #333;
  font-weight: bold;
  margin-bottom: 20px;
}

.custom-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #fff;
  font-size: 14px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.custom-table thead {
  background-color: #f5f7fa;
  color: #333;
}

.custom-table th,
.custom-table td {
  padding: 12px 15px;
  border-bottom: 1px solid #ebeef5;
  text-align: center;
}

.custom-table tr:hover {
  background-color: #f9fafb;
  transition: background-color 0.3s ease;
}

.link-details {
  color: #409EFF;
  text-decoration: none;
  margin-right: 10px;
  transition: color 0.3s ease;
}

.link-details:hover {
  color: #337ecc;
}

.btn-delete {
  background-color: #ff4d4f;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-delete:hover {
  background-color: #d94849;
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .custom-table th,
  .custom-table td {
    padding: 8px 10px;
    font-size: 13px;
  }

  .link-details,
  .btn-delete {
    display: block;
    margin: 4px 0;
  }
}
</style>

